import React from 'react';

import styles from './poetryCard.css'

import qrcode from '../../../public/code.png';

import dateUtil from '../../utils/dateutil';
import getThemeColor from "../../utils/themeutil";
import getParams from "../../utils/pathutil";


class PoetryCard extends React.Component {
  state = {
    from: '/',
  };

  constructor(props) {
    super(props);
    // 根据url参数，获取poetryId, 然后向后端发起请求，获取对应的数据
    let pid = getParams("pid");
    props.initPoetry(pid);
  }

  render() {
    let {cardTitle, author, title, content, pic} = this.props;


    let titleStyle = {
      marginBottom: 'auto',
    };
    if (title.length > 12) {
      titleStyle.fontSize = '1em';
    } else if (title.length >= 8) {
      titleStyle.fontSize = '1.2em';
    } else if (title.length >= 6) {
      titleStyle.fontSize = '1.3em';
    }

    // 确保诗词换行没问题
    content = content.replace(/\n/g, '<br/>');
    return (
      <div className={styles.card_container}>
        <div className={styles.card_title}>
          {cardTitle}
        </div>
        <div className={styles.polaroid} id='poetryCard'>
          <div>
            {pic ?
              <img src={pic}
                   alt="logo图"
                   className={styles.polaroid_img}/>
              : (<div className={styles.polaroid_color}
                      style={{
                        backgroundColor: getThemeColor(),
                      }}>
                <h2 style={titleStyle}>{title}</h2>
                <h6 style={{
                  marginTop: "1em",
                  marginBottom: '.8em',
                }}>{author}</h6>
              </div>)
            }
            <div className={styles.container}>
              <p>
                <strong>《{title}》</strong> <sub>
                <small> &nbsp;&nbsp; {author}</small>
              </sub>
              </p>
              <pre dangerouslySetInnerHTML={{__html: content}}/>
            </div>
            <div className={styles.bottom_right}>
              <div className={styles.qr_info_container}>
                <img className={styles.qr_info}
                     src={qrcode}/>
              </div>
              <span> ZWeb+ | {dateUtil.getDay()} | {dateUtil.getWeekday()}</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default PoetryCard;
